<template>
	<view class="all-box">
		<!-- 404页面 -->
		<view class="noData" v-if="netWorkType == 'none'"><noData @handle="refresh"></noData></view>
		<view v-if="netWorkType != 'none'">
		<view class="binding-box">
			<view class="phone-img">
				<image :src="OSS_HOST+'img/phone.png'" mode="widthFix" style="width: 200rpx;"></image>
			</view>
			<view class="explain-box">
				<view class="text">
					为了您的账户安全，需要验证你的手机
				</view>
				<view class="phone">
					{{data.userInfo.mobile}}
				</view>
			</view>
			<view class="phone-list">
				
				<!-- 行 -->
				<view class="row">
					<view class="left-box">
						<view class="text">
							验证码
						</view>
						<view class="operation">
							<input type="text" value="" v-model="verification" placeholder="请输入验证码"/>
						</view>
					</view>
					
					<view class="right-box">
						<view class="text" v-if="countdown==0" @click="ClickCountdown">
							获取验证码
						</view>
						<view class="textno" v-if="countdown==1">
							
							<tui-countdown :time="timeList" borderColor="#fff" :hours="false" :minutes="false" scale unitEn  :isColon="false" @end="endOfTime"></tui-countdown>
							<text>后可重试</text>
						</view>
					</view>
				</view>
				
			</view>
			<view class="btn">
				<button type="default" @click="BtnBinding" class="btn-binding theme-bgcolor">下一步</button>
				
			</view>
			
		</view>
		
		<!-- 登录验证 -->

		<uni-popup-vlogin id="popupvLogin" ref="popupvLogin" type="bottom"/>
		
		<!-- 提示弹框 -->
		<tui-tips ref="toast"></tui-tips>
		</view>
		<!-- 登录弹框 -->
		<uni-popup-vlogin id="popupvLogin" ref="popupvLogin" type="bottom"/>
		
	</view>
</template>

<script>
	// 引入倒计时组件
	
	import uniCountdown from '@/components/tui-countdown/tui-countdown.vue'
	import {oss_host} from '@/config/config.js';	

	import Vue from 'vue'
	import { mapGetters } from 'vuex';
	export default{
		
		data() {
			return{
				data:{
					// 手机号码
					userInfo:{mobile:''},
				},
				// 验证码
				verification:'',
				// 倒计时
				countdown:0,
				timeList:60,
				
				// 图片
				phoneImg:'',
				// 图片链接站点
				OSS_HOST:oss_host,
			}
		},
		
		components:{
			uniCountdown
		},
		computed: {
				//注册网络状态
				...mapGetters(['netWorkType'])	
			},
		// onShow() {
		// 	const _this = this
		// 	let service = _this.$service
		// 	_this.getList()
		// },
		onShow:function() {
			let _this=this;
			let service = _this.$service
			_this.getList()
			
		},
		methods:{
			// change(e) {
			// 	console.log('popup发生变化')
			// },
			// 初始获取数据(手机号)
			getList(){
				const _this = this
				
				// const encryptedData = e.detail.encryptedData;
				// const iv = e.detail.iv;
				var opt={
					url:'/user/getUserMobile',
					data:{
						// encryptedData:encryptedData,
						// iv:iv
					},
					success:function(res){
						console.log(res)
						if(res.status==1){
								
							_this.data.userInfo = res.data.list
							console.log(_this.data.userInfo)
						 }
						else{
							  let options = {
								msg: res.message,
								type:'danger'
							  };								
							_this.$refs.toast.showTips(options);
						}
					}
				};
								
				_this.$service.GetApi(opt)	
			},
			
			// 获取验证码按钮
			ClickCountdown(){
				const _this = this
				_this.countdown=1
				// 向后端请求验证码
				//获取验证码
				
				//正则用不了
				var r=/^[1][3,4,5,7,8,9][0-9]{9}$/;
								
				// if (!_this.mobile.match(r)) {
				//      uni.showToast({
				//         icon: 'none',
				// 		position: 'bottom',
				//         title: '手机号不正确'
				//     });
				//     return false;
				// }
				// console.log("获取验证码")
				
				var opt={
						url:'/sms/getVertify',
						data:{
								mobile:_this.data.userInfo.tomobile,
								tpl_type:'user',
								option_type:'mb_bind_verify'
							},
						success:function(res){
										
							if(res.status==1){
								// _this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）		 
								//uni.setStorageSync('token',res.data.token);							
								uni.showToast({
										icon:'none',
										title:res.message,
										duration: 3000
								});
																					
							}else{
									console.log(res.message)
									uni.showToast({
										icon:'none',
										title:res.message
									});
							}
						}
				};
				
				_this.$service.GetApi(opt);
				
				
			},
			
			// 倒计时结束
			endOfTime: function() {
				const _this = this
				_this.countdown=0
				console.log("倒计时结束，事件执行")
			},
			
			// 点击下一步按钮
			BtnBinding(){
				// console.log("点击了下一步按钮")
				const _this = this
				if(_this.verification ==''){
					uni.showToast({
						icon:'none',
						title:'请输入验证码'
					})
					return 
				}
				// 验证码接口书写
				var opt={
						url:'/user/editBindMobile',
						data:{
								mobile:_this.data.userInfo.tomobile,
								phone_code:_this.verification
							},
						success:function(res){
										
							if(res.status==1){
								
								// 跳转报错setxx找不到请到page。js添加页面信息
								// _this.$refer.setVilit('/pages/user/security/phone/phone_binding')
								// _this.$refer.toUrl()
								_this.$refer.setVilit('/pages/my/phone/phone_binding')
								let callback = function(url){
								   _this.$refs.popupvLogin.open()
								}
								_this.$refer.toUrl(callback)													
							}else{
									_this.isRotate=false
									uni.showToast({
										icon:'none',
										title:res.message
									});
							}
						}
				};
				
				_this.$service.GetApi(opt);
				
			}
		}
		
	}
</script>

<style lang="scss">
	@import "./phone_verification.scss";
</style>

